<template>
  <main class="diy-page">
    
    <div class="container">

      
      <!-- 主要内容区域：自由创作和AI生成并排 -->
      <div class="main-content-grid">
        <!-- 左侧：自由创作 -->
        <div class="free-creation-section">
          <h2 class="section-title">自由创作</h2>
          <p class="section-description">自由选择花材、包装和贺卡</p>
          
          <div class="preview-container">
            <div class="bouquet-preview">
              <img :src="previewImage" alt="花束预览" class="preview-image" />
              <!-- 添加收藏按钮 -->
              <button 
                class="favorite-btn" 
                @click.stop="toggleFavorite('custom')"
                :class="{ 'favorited': isFavorited('custom') }"
                v-if="selectedFlowers.length > 0"
              >
                <span v-if="isFavorited('custom')">❤️</span>
                <span v-else>🤍</span>
              </button>
            </div>
            <div class="preview-info">
              <h3 class="preview-title">{{ bouquetName || '自定义花束' }}</h3>
              <p class="preview-price">预估价格: ¥{{ calculateTotalPrice() }}</p>
              <div class="preview-details">
                <p v-if="selectedFlowers.length > 0">
                  <strong>已选花材:</strong> 
                  <span v-for="(flower, index) in selectedFlowers" :key="flower.id">
                    {{ flower.name }} x{{ flower.quantity }}{{ index < selectedFlowers.length - 1 ? ', ' : '' }}
                  </span>
                </p>
                <p v-if="selectedPackaging">
                  <strong>包装:</strong> {{ selectedPackaging.name }}
                </p>
                <p v-if="selectedCard">
                  <strong>贺卡:</strong> {{ selectedCard.name }}
                </p>
              </div>
            </div>
            
            <div class="action-buttons">
              <button class="btn-outline" @click="resetSelection">重新选择</button>
              <button class="btn-ai" @click="generateFromSelection">AI生成</button>
              <button class="btn-primary" @click="addToCart">加入购物车</button>
            </div>
          </div>
          
          <div class="selection-section">
            <div class="selection-tabs">
              <button 
                v-for="tab in tabs" 
                :key="tab.id"
                class="tab-btn"
                :class="{ 'active': activeTab === tab.id }"
                @click="activeTab = tab.id"
              >
                {{ tab.name }}
              </button>
            </div>
            
            <!-- 搜索花束 - 移动到选项卡下方 -->
            <div class="search-container">
              <input 
                type="text" 
                v-model="searchQuery" 
                placeholder="搜索花材、场合或风格..." 
                class="search-input"
              />
              <button class="search-btn" @click="searchBouquets">
                <span>🔍</span>
              </button>
            </div>
            
            <!-- 花材选择 -->
            <div class="selection-content" v-if="activeTab === 'flowers'">
              <h3 class="selection-title">选择花材</h3>
              <p class="selection-description">挑选您喜欢的花材组合</p>
              
              <div class="flowers-grid">
                <div 
                  v-for="flower in availableFlowers" 
                  :key="flower.id"
                  class="flower-card"
                  :class="{ 'selected': isFlowerSelected(flower.id) }"
                >
                  <div class="flower-image">
                    <img :src="flower.image" :alt="flower.name" />
                  </div>
                  <div class="flower-info">
                    <h4 class="flower-name">{{ flower.name }}</h4>
                    <p class="flower-price">¥{{ flower.price }}/支</p>
                    
                    <div class="quantity-selector">
                      <button 
                        class="quantity-btn" 
                        @click="decreaseFlowerQuantity(flower.id)"
                        :disabled="!isFlowerSelected(flower.id)"
                      >
                        -
                      </button>
                      <span class="quantity">{{ getFlowerQuantity(flower.id) }}</span>
                      <button 
                        class="quantity-btn plus-btn" 
                        @click="increaseFlowerQuantity(flower.id)"
                      >
                        <span class="plus-icon">+</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 包装选择 -->
            <div class="selection-content" v-if="activeTab === 'packaging'">
              <h3 class="selection-title">选择包装</h3>
              <p class="selection-description">精美包装增添仪式感</p>
              
              <div class="packaging-grid">
                <div 
                  v-for="packaging in availablePackaging" 
                  :key="packaging.id"
                  class="packaging-card"
                  :class="{ 'selected': selectedPackaging && selectedPackaging.id === packaging.id }"
                  @click="selectPackaging(packaging)"
                >
                  <div class="packaging-image">
                    <img :src="packaging.image" :alt="packaging.name" />
                  </div>
                  <div class="packaging-info">
                    <h4 class="packaging-name">{{ packaging.name }}</h4>
                    <p class="packaging-price">¥{{ packaging.price }}</p>
                    <div class="packaging-select">
                      <span v-if="selectedPackaging && selectedPackaging.id === packaging.id">已选择</span>
                      <button v-else class="select-btn">
                        <span class="plus-icon">+</span> 选择
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 贺卡选择 -->
            <div class="selection-content" v-if="activeTab === 'card'">
              <h3 class="selection-title">选择贺卡</h3>
              <p class="selection-description">附上您的祝福</p>
              
              <div class="cards-grid">
                <div 
                  v-for="card in availableCards" 
                  :key="card.id"
                  class="card-item"
                  :class="{ 'selected': selectedCard &amp;&amp; selectedCard.id === card.id }"
                  @click="selectCard(card)"
                >
                  <div class="card-image">
                    <img :src="card.image" :alt="card.name" />
                  </div>
                  <div class="card-info">
                    <h4 class="card-name">{{ card.name }}</h4>
                    <p class="card-price">¥{{ card.price }}</p>
                  </div>
                  <div class="card-select">
                    <span v-if="selectedCard && selectedCard.id === card.id">已选择</span>
                    <button v-else class="select-btn">
                      <span class="plus-icon">+</span> 选择
                    </button>
                  </div>
                </div>
              </div>
              
              <div class="card-message" v-if="selectedCard">
                <h4 class="message-title">贺卡留言</h4>
                <textarea 
                  v-model="cardMessage" 
                  class="message-input" 
                  placeholder="请输入您想要表达的祝福..."
                  rows="4"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧：AI生成 -->
        <div class="ai-generation-section">
          <h2 class="section-title">AI花束生成</h2>
          <p class="section-description">让AI为您设计专属花束</p>
          
          <!-- AI对话框 -->
          <div class="ai-chat-container">
            <div class="chat-messages" ref="chatMessages">
              <div class="message ai-message">
                <div class="message-avatar">🤖</div>
                <div class="message-content">
                  <p>您好！我是花漾AI助手，可以帮您设计专属花束。请告诉我您想要什么样的花束，或者选择下方的快捷选项。</p>
                </div>
              </div>
              
              <div v-for="(message, index) in chatMessages" :key="index" 
                   :class="['message', message.sender === 'user' ? 'user-message' : 'ai-message']">
                <div class="message-avatar">{{ message.sender === 'user' ? '👤' : '🤖' }}</div>
                <div class="message-content">
                  <p>{{ message.text }}</p>
                </div>
              </div>
              
              <div class="message ai-message" v-if="isGenerating">
                <div class="message-avatar">🤖</div>
                <div class="message-content">
                  <div class="typing-indicator">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="chat-input-container">
              <input 
                type="text" 
                v-model="chatInput" 
                placeholder="描述您想要的花束..." 
                class="chat-input"
                @keyup.enter="sendChatMessage"
                :disabled="isGenerating"
              />
              <button 
                class="chat-send-btn" 
                @click="sendChatMessage"
                :disabled="isGenerating"
              >
                发送
              </button>
            </div>
            
            <div class="quick-prompts">
              <button 
                v-for="prompt in quickPrompts" 
                :key="prompt"
                class="quick-prompt-btn"
                @click="useQuickPrompt(prompt)"
                :disabled="isGenerating"
              >
                {{ prompt }}
              </button>
            </div>
          </div>
          
          <!-- AI生成结果 -->
          <div class="ai-result" v-if="aiGeneratedBouquet && !isGenerating">
            <div class="result-preview">
              <img :src="aiGeneratedBouquet.image" alt="AI生成花束" class="ai-preview-image" />
              <!-- 添加收藏按钮 -->
              <button 
                class="favorite-btn" 
                @click.stop="toggleFavorite('ai')"
                :class="{ 'favorited': isFavorited('ai') }"
              >
                <span v-if="isFavorited('ai')">❤️</span>
                <span v-else>🤍</span>
              </button>
            </div>
            <div class="result-info">
              <h3 class="result-title">{{ aiGeneratedBouquet.name }}</h3>
              <p class="result-description">{{ aiGeneratedBouquet.description }}</p>
              <p class="result-price">预估价格: ¥{{ aiGeneratedBouquet.price }}</p>
              
              <div class="result-details">
                <h4 class="details-title">花材组成:</h4>
                <ul class="flowers-list">
                  <li v-for="flower in aiGeneratedBouquet.flowers" :key="flower.id">
                    {{ flower.name }} x{{ flower.quantity }}
                  </li>
                </ul>
              </div>
              
              <div class="result-actions">
                <button class="btn-outline" @click="regenerateAIBouquet">重新生成</button>
                <button class="btn-primary" @click="useAIBouquet">使用此设计</button>
                <button class="btn-primary" @click="addAIBouquetToCart">直接购买</button>
              </div>
            </div>
          </div>
          
          <!-- 增强的AI生成等待动画 -->
          <div class="ai-generating-animation" v-if="isGenerating && !aiGeneratedBouquet">
            <div class="flower-animation-container">
              <div class="flower-animation">
              </div>
              
              <!-- 添加小花动态加载效果 -->
              <div class="mini-flowers-container">
                <div class="mini-flower mini-flower-1">🌸</div>
                <div class="mini-flower mini-flower-2">🌹</div>
                <div class="mini-flower mini-flower-3">🌺</div>
                <div class="mini-flower mini-flower-4">🌻</div>
                <div class="mini-flower mini-flower-5">🌼</div>
                <div class="mini-flower mini-flower-6">💐</div>
              </div>
            </div>
            
            <p class="generating-text">AI正在为您精心设计花束</p>
            <div class="generating-progress">
              <div class="progress-step" :class="{ 'active': generatingStep >= 1 }">分析需求</div>
              <div class="progress-step" :class="{ 'active': generatingStep >= 2 }">选择花材</div>
              <div class="progress-step" :class="{ 'active': generatingStep >= 3 }">设计搭配</div>
              <div class="progress-step" :class="{ 'active': generatingStep >= 4 }">完成设计</div>
            </div>
            <p class="generating-tip">{{ generatingTips[currentTipIndex] }}</p>
          </div>
        </div>
      </div>
      
      <!-- 收藏成功提示 -->
      <div class="favorite-toast" v-if="showFavoriteToast">
        <div class="toast-content">
          <span class="toast-icon">{{ favoriteToastType === 'add' ? '❤️' : '🤍' }}</span>
          <span class="toast-message">{{ favoriteToastType === 'add' ? '已添加到我的收藏' : '已从收藏中移除' }}</span>
        </div>
      </div>
            <!-- 热门和新出花束推荐 -->
      <div class="recommendations">
        <div class="recommendation-tabs">
          <button 
            class="tab-btn" 
            :class="{ 'active': activeRecommendTab === 'popular' }"
            @click="activeRecommendTab = 'popular'"
          >
            热门花束
          </button>
          <button 
            class="tab-btn" 
            :class="{ 'active': activeRecommendTab === 'new' }"
            @click="activeRecommendTab = 'new'"
          >
            新品上市
          </button>
          <button 
            class="tab-btn" 
            :class="{ 'active': activeRecommendTab === 'nearby' }"
            @click="activeRecommendTab = 'nearby'"
          >
            附近花店样品
          </button>
        </div>
        
        <div class="recommendation-content">
          <div class="bouquet-cards">
            <div 
              v-for="bouquet in filteredRecommendedBouquets" 
              :key="bouquet.id"
              class="bouquet-card"
              @click="selectRecommendedBouquet(bouquet)"
            >
              <div class="bouquet-image">
                <img :src="bouquet.image" :alt="bouquet.name" />
                <div class="bouquet-badge" v-if="bouquet.isNew">新品</div>
                <div class="bouquet-badge popular" v-if="bouquet.isPopular">热门</div>
                <div class="bouquet-badge nearby" v-if="bouquet.isNearby">附近</div>
                <!-- 添加收藏按钮 -->
                <button 
                  class="favorite-btn recommended-favorite-btn" 
                  @click.stop="toggleFavorite(bouquet, 'recommended')"
                  :class="{ 'favorited': isFavoritedRecommended(bouquet.id) }"
                >
                  <span v-if="isFavoritedRecommended(bouquet.id)">❤️</span>
                  <span v-else>🤍</span>
                </button>
              </div>
              <div class="bouquet-info">
                <h4 class="bouquet-name">{{ bouquet.name }}</h4>
                <p class="bouquet-price">¥{{ bouquet.price }}</p>
                <button class="select-bouquet-btn">选择此花束</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </main>
</template>

<script>
export default {
  name: 'DIYBouquet',
  data() {
    return {
      // 收藏相关
      favorites: [],
      showFavoriteToast: false,
      favoriteToastType: 'add', // 'add' 或 'remove'
      
      // 搜索和推荐
      searchQuery: '',
      activeRecommendTab: 'popular',
      recommendedBouquets: [
        { 
          id: 1, 
          name: '浪漫粉玫瑰', 
          price: 199, 
          image: '@/assets/images/bouquet-1.jpg',
          isPopular: true,
          isNew: false,
          isNearby: false,
          flowers: [
            { id: 1, name: '粉玫瑰', quantity: 11 },
            { id: 5, name: '满天星', quantity: 3 },
            { id: 6, name: '绿叶', quantity: 5 }
          ],
          packaging: 2
        },
        { 
          id: 2, 
          name: '向日葵阳光', 
          price: 168, 
          image: '@/assets/images/bouquet-2.jpg',
          isPopular: true,
          isNew: false,
          isNearby: false,
          flowers: [
            { id: 3, name: '向日葵', quantity: 5 },
            { id: 6, name: '绿叶', quantity: 4 }
          ],
          packaging: 1
        },
        { 
          id: 3, 
          name: '百合之恋', 
          price: 258, 
          image: '@/assets/images/bouquet-3.jpg',
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 4, name: '百合', quantity: 6 },
            { id: 5, name: '满天星', quantity: 3 },
            { id: 6, name: '绿叶', quantity: 4 }
          ],
          packaging: 3
        },
        { 
          id: 4, 
          name: '混合花束', 
          price: 288, 
          image: '@/assets/images/bouquet-4.jpg',
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 1, name: '粉玫瑰', quantity: 3 },
            { id: 2, name: '红玫瑰', quantity: 3 },
            { id: 4, name: '百合', quantity: 2 },
            { id: 5, name: '满天星', quantity: 2 },
            { id: 6, name: '绿叶', quantity: 3 }
          ],
          packaging: 2
        },
        { 
          id: 5, 
          name: '紫色洋桔梗', 
          price: 228, 
          image: '@/assets/images/bouquet-5.jpg',
          isPopular: false,
          isNew: true,
          isNearby: false,
          flowers: [
            { id: 7, name: '洋桔梗', quantity: 8 },
            { id: 5, name: '满天星', quantity: 3 },
            { id: 6, name: '绿叶', quantity: 4 }
          ],
          packaging: 2
        },
        { 
          id: 6, 
          name: '蓝色绣球花', 
          price: 268, 
          image: '@/assets/images/bouquet-6.jpg',
          isPopular: false,
          isNew: true,
          isNearby: false,
          flowers: [
            { id: 8, name: '绣球花', quantity: 3 },
            { id: 6, name: '绿叶', quantity: 5 }
          ],
          packaging: 3
        },
        { 
          id: 7, 
          name: '附近花店特选', 
          price: 188, 
          image: '@/assets/images/bouquet-7.jpg',
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 2, name: '红玫瑰', quantity: 7 },
            { id: 5, name: '满天星', quantity: 3 },
            { id: 6, name: '绿叶', quantity: 4 }
          ],
          packaging: 1,
          shopName: '花艺坊',
          distance: '0.8km'
        },
        { 
          id: 8, 
          name: '附近花店推荐', 
          price: 298, 
          image: '@/assets/images/bouquet-8.jpg',
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 7, name: '洋桔梗', quantity: 5 },
            { id: 8, name: '绣球花', quantity: 2 },
            { id: 6, name: '绿叶', quantity: 3 }
          ],
          packaging: 2,
          shopName: '花之语',
          distance: '1.2km'
        }
      ],
      
      // 自由创作模式数据
      activeTab: 'flowers',
      tabs: [
        { id: 'flowers', name: '花材选择' },
        { id: 'packaging', name: '包装选择' },
        { id: 'card', name: '贺卡选择' }
      ],
      availableFlowers: [
        { id: 1, name: '粉玫瑰', price: 15, image: '@/assets/images/flower-1.jpg' },
        { id: 2, name: '红玫瑰', price: 18, image: '@/assets/images/flower-2.jpg' },
        { id: 3, name: '向日葵', price: 20, image: '@/assets/images/flower-3.jpg' },
        { id: 4, name: '百合', price: 25, image: '@/assets/images/flower-4.jpg' },
        { id: 5, name: '满天星', price: 10, image: '@/assets/images/flower-5.jpg' },
        { id: 6, name: '绿叶', price: 5, image: '@/assets/images/flower-6.jpg' },
        { id: 7, name: '洋桔梗', price: 18, image: '@/assets/images/flower-7.jpg' },
        { id: 8, name: '绣球花', price: 35, image: '@/assets/images/flower-8.jpg' }
      ],
      availablePackaging: [
        { id: 1, name: '简约牛皮纸', price: 15, image: '@/assets/images/packaging-1.jpg' },
        { id: 2, name: '韩式花束包装', price: 25, image: '@/assets/images/packaging-2.jpg' },
        { id: 3, name: '礼盒包装', price: 45, image: '@/assets/images/packaging-3.jpg' }
      ],
      availableCards: [
        { id: 1, name: '生日贺卡', price: 10, image: '@/assets/images/card-1.jpg' },
        { id: 2, name: '爱情贺卡', price: 10, image: '@/assets/images/card-2.jpg' },
        { id: 3, name: '感谢贺卡', price: 10, image: '@/assets/images/card-3.jpg' }
      ],
      selectedFlowers: [],
      selectedPackaging: null,
      selectedCard: null,
      cardMessage: '',
      bouquetName: '',
      previewImage: '@/assets/images/bouquet-preview.jpg',
      bouquetPrice: 0,
      
      // AI生成模式数据
      chatInput: '',
      chatMessages: [],
      quickPrompts: [
        '生日花束', 
        '婚礼花束', 
        '感谢花束', 
        '浪漫约会'
      ],
      isGenerating: false,
      aiGeneratedBouquet: null,
      generatingStep: 0,
      generatingTips: [
        '不同的花材有不同的花语，玫瑰代表爱情，百合代表纯洁...',
        '花束的色彩搭配很重要，互补色往往能产生惊艳效果',
        '季节性花材更新鲜，也更环保',
        '包装也是花束的重要组成部分，能提升整体美感',
        '适合的花束能表达您的心意，传递您的情感'
      ],
      currentTipIndex: 0,
      tipInterval: null
    }
  },
  computed: {
    filteredRecommendedBouquets() {
      if (this.activeRecommendTab === 'popular') {
        return this.recommendedBouquets.filter(bouquet => bouquet.isPopular);
      } else if (this.activeRecommendTab === 'new') {
        return this.recommendedBouquets.filter(bouquet => bouquet.isNew);
      } else if (this.activeRecommendTab === 'nearby') {
        return this.recommendedBouquets.filter(bouquet => bouquet.isNearby);
      }
      return this.recommendedBouquets;
    }
  },
  watch: {
    isGenerating(newVal) {
      if (newVal) {
        this.startGeneratingAnimation();
      } else {
        this.stopGeneratingAnimation();
      }
    },
    chatMessages() {
      this.$nextTick(() => {
        if (this.$refs.chatMessages) {
          this.$refs.chatMessages.scrollTop = this.$refs.chatMessages.scrollHeight;
        }
      });
    }
  },
  created() {
    // 检查URL参数，判断是否有模板ID
    const templateId = this.$route.query.template;
    
    // 如果有模板ID，加载对应的花束模板
    if (templateId) {
      this.loadBouquetTemplate();
    }
    
    // 加载收藏数据
    this.loadFavorites();
  },
  beforeUnmount() {
    this.stopGeneratingAnimation();
  },
  methods: {
    // 收藏相关方法
    loadFavorites() {
      const storedFavorites = localStorage.getItem('userFavorites');
      if (storedFavorites) {
        this.favorites = JSON.parse(storedFavorites);
      }
    },
    saveFavorites() {
      localStorage.setItem('userFavorites', JSON.stringify(this.favorites));
    },
    isFavorited(type) {
      if (type === 'custom') {
        // 检查当前自定义花束是否已收藏
        return this.favorites.some(fav => 
          fav.type === 'custom' && 
          fav.id === this.generateCustomBouquetId()
        );
      } else if (type === 'ai' && this.aiGeneratedBouquet) {
        // 检查当前AI生成花束是否已收藏
        return this.favorites.some(fav => 
          fav.type === 'ai' && 
          fav.id === this.aiGeneratedBouquet.name
        );
      }
      return false;
    },
    isFavoritedRecommended(bouquetId) {
      // 检查推荐花束是否已收藏
      return this.favorites.some(fav => 
        fav.type === 'recommended' && 
        fav.id === bouquetId
      );
    },
    generateCustomBouquetId() {
      // 生成自定义花束的唯一ID
      const flowerIds = this.selectedFlowers.map(f => `${f.id}-${f.quantity}`).join('_');
      const packagingId = this.selectedPackaging ? this.selectedPackaging.id : 'none';
      const cardId = this.selectedCard ? this.selectedCard.id : 'none';
      return `custom-${flowerIds}-${packagingId}-${cardId}`;
    },
    toggleFavorite(type, sourceType) {
      if (sourceType === 'recommended' && type) {
        // 收藏推荐花束
        const bouquet = type; // 这里type实际上是bouquet对象
        const existingIndex = this.favorites.findIndex(fav => 
          fav.type === 'recommended' && fav.id === bouquet.id
        );
        
        if (existingIndex !== -1) {
          // 移除收藏
          this.favorites.splice(existingIndex, 1);
          this.showFavoriteToast = true;
          this.favoriteToastType = 'remove';
        } else {
          // 添加收藏
          const recommendedBouquet = {
            id: bouquet.id,
            type: 'recommended',
            name: bouquet.name,
            price: bouquet.price,
            image: bouquet.image,
            flowers: [...bouquet.flowers],
            packaging: bouquet.packaging,
            date: new Date().toISOString()
          };
          
          this.favorites.push(recommendedBouquet);
          this.showFavoriteToast = true;
          this.favoriteToastType = 'add';
        }
        
        this.saveFavorites();
        this.hideToastAfterDelay();
        return;
      }
      
      if (type === 'custom' && this.selectedFlowers.length > 0) {
        const customBouquetId = this.generateCustomBouquetId();
        const existingIndex = this.favorites.findIndex(fav => 
          fav.type === 'custom' && fav.id === customBouquetId
        );
        
        if (existingIndex !== -1) {
          // 移除收藏
          this.favorites.splice(existingIndex, 1);
          this.showFavoriteToast = true;
          this.favoriteToastType = 'remove';
        } else {
          // 添加收藏
          const customBouquet = {
            id: customBouquetId,
            type: 'custom',
            name: this.bouquetName || '自定义花束',
            price: this.calculateTotalPrice(),
            image: this.previewImage,
            flowers: [...this.selectedFlowers],
            packaging: this.selectedPackaging ? { ...this.selectedPackaging } : null,
            card: this.selectedCard ? { ...this.selectedCard, message: this.cardMessage } : null,
            date: new Date().toISOString()
          };
          
          this.favorites.push(customBouquet);
          this.showFavoriteToast = true;
          this.favoriteToastType = 'add';
        }
        
        this.saveFavorites();
        this.hideToastAfterDelay();
      } else if (type === 'ai' && this.aiGeneratedBouquet) {
        const existingIndex = this.favorites.findIndex(fav => 
          fav.type === 'ai' && fav.id === this.aiGeneratedBouquet.name
        );
        
        if (existingIndex !== -1) {
          // 移除收藏
          this.favorites.splice(existingIndex, 1);
          this.showFavoriteToast = true;
          this.favoriteToastType = 'remove';
        } else {
          // 添加收藏
          const aiBouquet = {
            id: this.aiGeneratedBouquet.name,
            type: 'ai',
            name: this.aiGeneratedBouquet.name,
            price: this.aiGeneratedBouquet.price,
            image: this.aiGeneratedBouquet.image,
            flowers: [...this.aiGeneratedBouquet.flowers],
            packaging: this.availablePackaging.find(p => p.id === this.aiGeneratedBouquet.packaging) || null,
            description: this.aiGeneratedBouquet.description,
            prompt: this.aiGeneratedBouquet.prompt,
            date: new Date().toISOString()
          };
          
          this.favorites.push(aiBouquet);
          this.showFavoriteToast = true;
          this.favoriteToastType = 'add';
        }
        
        this.saveFavorites();
        this.hideToastAfterDelay();
      }
    },
    hideToastAfterDelay() {
      setTimeout(() => {
        this.showFavoriteToast = false;
      }, 2000);
    },
    
    // 搜索和推荐相关方法
    searchBouquets() {
      // 实现搜索逻辑
      console.log('搜索:', this.searchQuery);
      
      // 根据搜索词过滤花材
      if (this.searchQuery.trim()) {
        const query = this.searchQuery.toLowerCase();
        
        // 根据当前选项卡执行不同的搜索
        if (this.activeTab === 'flowers') {
          // 过滤花材
          const filteredFlowers = this.availableFlowers.filter(flower => 
            flower.name.toLowerCase().includes(query)
          );
          
          // 高亮显示搜索结果
          if (filteredFlowers.length > 0) {
            // 可以添加高亮逻辑
            console.log('找到匹配的花材:', filteredFlowers);
          }
        } else if (this.activeTab === 'packaging') {
          // 过滤包装
          const filteredPackaging = this.availablePackaging.filter(pkg => 
            pkg.name.toLowerCase().includes(query)
          );
          
          if (filteredPackaging.length > 0) {
            console.log('找到匹配的包装:', filteredPackaging);
          }
        } else if (this.activeTab === 'card') {
          // 过滤贺卡
          const filteredCards = this.availableCards.filter(card => 
            card.name.toLowerCase().includes(query)
          );
          
          if (filteredCards.length > 0) {
            console.log('找到匹配的贺卡:', filteredCards);
          }
        }
      }
    },
    selectRecommendedBouquet(bouquet) {
      // 将推荐花束应用到自由创作
      this.bouquetName = bouquet.name;
      this.selectedFlowers = bouquet.flowers.map(flower => {
        const flowerInfo = this.availableFlowers.find(f => f.id === flower.id) || {};
        return {
          ...flowerInfo,
          quantity: flower.quantity
        };
      });
      this.selectedPackaging = this.availablePackaging.find(p => p.id === bouquet.packaging) || null;
      
      // 设置预览图片
      this.previewImage = bouquet.image;
      
      // 确保价格一致性 - 直接使用推荐花束的价格
      this.bouquetPrice = bouquet.price;
      
      this.activeTab = 'flowers';
      
      // 滚动到自由创作区域
      this.$nextTick(() => {
        const element = document.querySelector('.free-creation-section');
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      });
    },
    
    // 自由创作模式方法
    loadBouquetTemplate() {
      // 从localStorage获取选中的花束信息
      const storedBouquet = localStorage.getItem('selectedBouquet');
      if (storedBouquet) {
        const bouquet = JSON.parse(storedBouquet);
        
        // 设置花束名称和预览图
        this.bouquetName = bouquet.name || '';
        if (bouquet.image) {
          this.previewImage = bouquet.image;
        }
        
        // 设置选中的花材
        if (bouquet.flowers && bouquet.flowers.length > 0) {
          this.selectedFlowers = bouquet.flowers.map(flower => {
            const flowerInfo = this.availableFlowers.find(f => f.id === flower.id) || {};
            return {
              id: flower.id,
              name: flower.name || flowerInfo.name,
              price: flowerInfo.price || 0,
              quantity: flower.quantity,
              image: flowerInfo.image
            };
          });
        }
        
        // 设置选中的包装
        if (bouquet.packaging) {
          this.selectedPackaging = this.availablePackaging.find(p => p.id === bouquet.packaging) || null;
        }
        
        // 自动切换到包装选择标签，引导用户继续完成定制
        this.activeTab = 'packaging';
      }
    },
    isFlowerSelected(flowerId) {
      return this.selectedFlowers.some(flower => flower.id === flowerId);
    },
    getFlowerQuantity(flowerId) {
      const flower = this.selectedFlowers.find(flower => flower.id === flowerId);
      return flower ? flower.quantity : 0;
    },
    increaseFlowerQuantity(flowerId) {
      const flower = this.selectedFlowers.find(flower => flower.id === flowerId);
      if (flower) {
        flower.quantity += 1;
      } else {
        const flowerToAdd = this.availableFlowers.find(flower => flower.id === flowerId);
        this.selectedFlowers.push({
          ...flowerToAdd,
          quantity: 1
        });
      }
    },
    decreaseFlowerQuantity(flowerId) {
      const flowerIndex = this.selectedFlowers.findIndex(flower => flower.id === flowerId);
      if (flowerIndex !== -1) {
        if (this.selectedFlowers[flowerIndex].quantity > 1) {
          this.selectedFlowers[flowerIndex].quantity -= 1;
        } else {
          this.selectedFlowers.splice(flowerIndex, 1);
        }
      }
    },
    selectPackaging(packaging) {
      this.selectedPackaging = packaging;
    },
    selectCard(card) {
      this.selectedCard = card;
    },
    calculateTotalPrice() {
      // 如果有设置bouquetPrice，则直接返回
      if (this.bouquetPrice > 0) {
        return this.bouquetPrice;
      }
      
      let total = 0;
      
      // 花材价格
      this.selectedFlowers.forEach(flower => {
        total += flower.price * flower.quantity;
      });
      
      // 包装价格
      if (this.selectedPackaging) {
        total += this.selectedPackaging.price;
      }
      
      // 贺卡价格
      if (this.selectedCard) {
        total += this.selectedCard.price;
      }
      
      return total;
    },
    resetSelection() {
      this.selectedFlowers = [];
      this.selectedPackaging = null;
      this.selectedCard = null;
      this.cardMessage = '';
      this.bouquetName = '';
      this.previewImage = '@/assets/images/bouquet-preview.jpg';
      this.bouquetPrice = 0; // 重置价格
      this.activeTab = 'flowers';
    },
    addToCart() {
      // 构建花束数据
      const bouquetData = {
        name: this.bouquetName || '自定义花束',
        price: this.calculateTotalPrice(),
        image: this.previewImage,
        flowers: [...this.selectedFlowers],
        packaging: this.selectedPackaging ? { ...this.selectedPackaging } : null,
        card: this.selectedCard ? { ...this.selectedCard, message: this.cardMessage } : null,
        type: 'custom'
      };
      
      // 使用自定义事件发送数据到购物车组件
      const event = new CustomEvent('add-to-cart', { 
        detail: bouquetData,
        bubbles: true 
      });
      window.dispatchEvent(event);
    },
    
    // 新增方法：从自由创作生成AI花束
    generateFromSelection() {
      // 检查是否有选择花材
      if (this.selectedFlowers.length === 0) {
        alert('请先选择至少一种花材');
        return;
      }
      
      // 构建提示词
      let prompt = '基于以下花材设计一束花: ';
      this.selectedFlowers.forEach((flower, index) => {
        prompt += `${flower.name} x${flower.quantity}`;
        if (index < this.selectedFlowers.length - 1) {
          prompt += ', ';
        }
      });
      
      if (this.selectedPackaging) {
        prompt += `，使用${this.selectedPackaging.name}包装`;
      }
      
      // 设置聊天输入
      this.chatInput = prompt;
      
      // 滚动到AI生成区域
      this.$nextTick(() => {
        const element = document.querySelector('.ai-generation-section');
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
        
        // 发送消息
        this.sendChatMessage();
      });
    },
    
    // AI生成模式方法
    sendChatMessage() {
      if (!this.chatInput.trim()) return;
      
      // 添加用户消息
      this.chatMessages.push({
        sender: 'user',
        text: this.chatInput
      });
      
      const userPrompt = this.chatInput;
      this.chatInput = '';
      
      // 添加AI回复
      setTimeout(() => {
        this.chatMessages.push({
          sender: 'ai',
          text: '我会根据您的需求设计一束花。请稍等片刻...'
        });
        
        // 开始生成花束
        this.generateAIBouquet(userPrompt);
      }, 500);
    },
    useQuickPrompt(prompt) {
      this.chatInput = prompt;
      this.sendChatMessage();
    },
    generateAIBouquet(prompt) {
      // 开始生成动画
      this.isGenerating = true;
      this.aiGeneratedBouquet = null;
      
      // 构建提示词
      const fullPrompt = prompt || '生成一束花';
      
      // 模拟API调用延迟
      setTimeout(() => {
        // 模拟生成结果
        this.aiGeneratedBouquet = {
          name: this.generateBouquetName(fullPrompt),
          description: `这是一束根据您的需求"${fullPrompt}"设计的花束，融合了季节性花材和精美搭配。`,
          price: Math.floor(Math.random() * 200) + 150,
          image: '@/assets/images/bouquet-preview.jpg',
          flowers: this.generateRandomFlowers(),
          packaging: Math.floor(Math.random() * 3) + 1,
          prompt: fullPrompt
        };
        
        this.isGenerating = false;
        
        // 添加AI回复
        this.chatMessages.push({
          sender: 'ai',
          text: `我已为您设计了"${this.aiGeneratedBouquet.name}"，您可以查看下方的设计效果。`
        });
      }, 8000); // 延迟8秒，模拟AI生成过程
    },
    regenerateAIBouquet() {
      // 重新生成花束
      this.generateAIBouquet(this.aiGeneratedBouquet.prompt);
    },
    useAIBouquet() {
      // 将AI生成的花束应用到自由创作模式
      if (this.aiGeneratedBouquet) {
        this.bouquetName = this.aiGeneratedBouquet.name;
        this.selectedFlowers = this.aiGeneratedBouquet.flowers.map(flower => {
          const flowerInfo = this.availableFlowers.find(f => f.id === flower.id) || {};
          return {
            ...flowerInfo,
            quantity: flower.quantity
          };
        });
        this.selectedPackaging = this.availablePackaging.find(p => p.id === this.aiGeneratedBouquet.packaging) || null;
        this.previewImage = this.aiGeneratedBouquet.image;
        this.bouquetPrice = this.aiGeneratedBouquet.price; // 设置价格
        this.activeTab = 'flowers';
        
        // 滚动到自由创作区域
        this.$nextTick(() => {
          const element = document.querySelector('.free-creation-section');
          if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
          }
        });
      }
    },
    addAIBouquetToCart() {
      if (this.aiGeneratedBouquet) {
        // 构建花束数据
        const bouquetData = {
          name: this.aiGeneratedBouquet.name,
          price: this.aiGeneratedBouquet.price,
          image: this.aiGeneratedBouquet.image,
          flowers: [...this.aiGeneratedBouquet.flowers],
          packaging: this.availablePackaging.find(p => p.id === this.aiGeneratedBouquet.packaging) || null,
          prompt: this.aiGeneratedBouquet.prompt,
          type: 'ai'
        };
        
        // 使用自定义事件发送数据到购物车组件
        const event = new CustomEvent('add-to-cart', { 
          detail: bouquetData,
          bubbles: true 
        });
        window.dispatchEvent(event);
        
        // 添加AI回复
        this.chatMessages.push({
          sender: 'ai',
          text: `您的花束"${this.aiGeneratedBouquet.name}"已添加到购物车。`
        });
      }
    },
    
    // AI生成动画相关方法
    startGeneratingAnimation() {
      this.generatingStep = 0;
      this.currentTipIndex = 0;
      
      // 逐步显示生成进度
      const stepInterval = setInterval(() => {
        if (this.generatingStep < 4) {
          this.generatingStep++;
        } else {
          clearInterval(stepInterval);
        }
      }, 1500);
      
      // 循环显示提示
      this.tipInterval = setInterval(() => {
        this.currentTipIndex = (this.currentTipIndex + 1) % this.generatingTips.length;
      }, 3000);
    },
    stopGeneratingAnimation() {
      if (this.tipInterval) {
        clearInterval(this.tipInterval);
        this.tipInterval = null;
      }
    },
    
    // 辅助方法
    generateBouquetName(prompt) {
      // 根据提示词生成花束名称
      const occasions = ['生日', '爱情', '感谢', '祝贺', '探病', '婚礼', '毕业', '节日'];
      const styles = ['浪漫', '清新', '典雅', '活泼', '简约', '奢华', '复古', '现代'];
      
      let occasion = occasions[Math.floor(Math.random() * occasions.length)];
      let style = styles[Math.floor(Math.random() * styles.length)];
      
      // 尝试从提示词中提取场合和风格
      for (const occ of occasions) {
        if (prompt.includes(occ)) {
          occasion = occ;
          break;
        }
      }
      
      for (const sty of styles) {
        if (prompt.includes(sty)) {
          style = sty;
          break;
        }
      }
      
      return `${style}${occasion}花束`;
    },
    generateRandomFlowers() {
      // 生成随机花材组合
      const result = [];
      const flowerCount = Math.floor(Math.random() * 3) + 3; // 3-5种花材
      
      for (let i = 0; i < flowerCount; i++) {
        const flowerId = Math.floor(Math.random() * this.availableFlowers.length) + 1;
        const quantity = Math.floor(Math.random() * 5) + 1; // 1-5支
        
        // 检查是否已添加该花材
        const existingFlower = result.find(f => f.id === flowerId);
        if (existingFlower) {
          existingFlower.quantity += quantity;
        } else {
          const flower = this.availableFlowers.find(f => f.id === flowerId);
          if (flower) {
            result.push({
              id: flower.id,
              name: flower.name,
              quantity: quantity
            });
          }
        }
      }
      
      // 确保至少有一种花材
      if (result.length === 0) {
        const defaultFlower = this.availableFlowers[0];
        result.push({
          id: defaultFlower.id,
          name: defaultFlower.name,
          quantity: 5
        });
      }
      
      return result;
    }
  }
};
</script>

<style scoped>
.diy-page {
  padding-top: 70px; /* 为固定头部留出空间 */
  background: linear-gradient(135deg, #D693A1, #E2F5FF);
  min-height: 100vh;
}

.page-header {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 2rem 0;
  text-align: center;
  margin-bottom: 2rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.page-title {
  color: #e75480;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.page-description {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* 搜索和推荐区域 */
.recommendations {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.search-container {
  position: relative;
  margin: 1rem 0;
  padding: 0 1rem;
}

.search-input {
  width: 100%;
  padding: 0.8rem 3rem 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

.search-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
}

.recommendation-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.recommendation-tabs .tab-btn {
  padding: 0.8rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.recommendation-tabs .tab-btn:hover {
  color: #e75480;
}

.recommendation-tabs .tab-btn.active {
  color: #e75480;
  border-bottom-color: #e75480;
  font-weight: 500;
}

.bouquet-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.bouquet-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

.bouquet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.bouquet-image {
  height: 150px;
  overflow: hidden;
  position: relative;
}

.bouquet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bouquet-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #e75480;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.bouquet-badge.popular {
  background-color: #f5a623;
}

.bouquet-badge.nearby {
  background-color: #4a90e2;
}

.bouquet-info {
  padding: 1rem;
  text-align: center;
}

.bouquet-name {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.bouquet-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.select-bouquet-btn {
  width: 100%;
  padding: 0.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 0.9rem;
}

.select-bouquet-btn:hover {
  background-color: #d64d7b;
}

/* 主要内容区域 */
.main-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 1.5rem;
}

/* 自由创作区域 */
.free-creation-section {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.preview-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.bouquet-preview {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 收藏按钮 */
.favorite-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.favorite-btn:hover {
  background-color: white;
  transform: scale(1.1);
}

.favorite-btn.favorited {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 收藏提示 */
.favorite-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  z-index: 1000;
  animation: fadeInOut 2s ease-in-out;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toast-icon {
  font-size: 1.2rem;
}

.toast-message {
  font-size: 0.9rem;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, 20px); }
  20% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}

.preview-info {
  padding: 1rem;
}

.preview-title {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.preview-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #e75480;
  margin-bottom: 0.8rem;
}

.preview-details {
  color: #666;
  font-size: 0.9rem;
}

.preview-details p {
  margin-bottom: 0.3rem;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
  padding: 0 1rem 1rem;
}

.btn-outline {
  padding: 0.7rem 0;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

.btn-primary {
  padding: 0.7rem 0;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

/* 新增AI生成按钮样式 */
.btn-ai {
  padding: 0.7rem 0;
  background-color: #f8e1e7;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.btn-ai:hover {
  background-color: #f5d0dc;
}

.selection-section {
  background-color: #f9f9f9;
  border-radius: 8px;
}

.selection-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-btn {
  flex: 1;
  padding: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: #666;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  color: #e75480;
}

.tab-btn.active {
  color: #e75480;
  border-bottom-color: #e75480;
  font-weight: 500;
}

.selection-content {
  padding: 1.5rem;
  max-height: 400px;
  overflow-y: auto;
}

.selection-title {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.selection-description {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* 花材选择 */
.flowers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.flower-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.flower-card:hover {
  transform: translateY(-3px);
}

.flower-card.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.flower-image {
  height: 100px;
  overflow: hidden;
}

.flower-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flower-info {
  padding: 0.8rem;
}

.flower-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.flower-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.quantity-btn:hover {
  background-color: #f0f0f0;
}

.quantity-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.plus-btn {
  color: #e75480;
  font-weight: bold;
}

.plus-icon {
  display: inline-block;
  font-weight: bold;
  color: #e75480;
}

.quantity {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
}

/* 包装选择 */
.packaging-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.packaging-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
}

.packaging-card:hover {
  transform: translateY(-3px);
}

.packaging-card.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.packaging-image {
  height: 100px;
  overflow: hidden;
}

.packaging-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.packaging-info {
  padding: 0.8rem;
}

.packaging-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.packaging-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.packaging-select {
  text-align: center;
  font-size: 0.9rem;
}

.select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.8rem;
}

.select-btn:hover {
  background-color: #f8e1e7;
}

/* 贺卡选择 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.card-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0.8rem;
}

.card-item:hover {
  transform: translateY(-3px);
}

.card-item.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.card-image {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-info {
  text-align: center;
  margin-bottom: 0.8rem;
}

.card-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.card-price {
  color: #e75480;
  font-weight: 500;
  font-size: 0.9rem;
}

.card-select {
  text-align: center;
  font-size: 0.9rem;
}

.card-message {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.message-title {
  font-size: 1rem;
  margin-bottom: 0.8rem;
  color: #333;
}

.message-input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.message-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

/* AI生成区域 */
.ai-generation-section {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

/* AI对话框 */
.ai-chat-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.chat-messages {
  height: 300px;
  overflow-y: auto;
  padding: 1rem;
}

.message {
  display: flex;
  margin-bottom: 1rem;
}

.ai-message {
  flex-direction: row;
}

.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 0.8rem;
}

.ai-message .message-avatar {
  background-color: #e75480;
  color: white;
}

.user-message .message-avatar {
  background-color: #4a90e2;
  color: white;
}

.message-content {
  max-width: 70%;
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.ai-message .message-content {
  background-color: white;
  border: 1px solid #eee;
}

.user-message .message-content {
  background-color: #4a90e2;
  color: white;
}

.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #e75480;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0.1s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.chat-input-container {
  display: flex;
  padding: 1rem;
  border-top: 1px solid #eee;
}

.chat-input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.chat-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

.chat-send-btn {
  margin-left: 0.8rem;
  padding: 0 1.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.chat-send-btn:hover {
  background-color: #d64d7b;
}

.chat-send-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.quick-prompt-btn {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-prompt-btn:hover {
  background-color: #e0e0e0;
}

.quick-prompt-btn:disabled {
  color: #aaa;
  cursor: not-allowed;
}

/* AI生成结果 */
.ai-result {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  padding: 1rem;
}

.result-preview {
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1rem;
  position: relative;
}

.ai-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-title {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.result-description {
  color: #666;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.result-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #e75480;
  margin-bottom: 1rem;
}

.result-details {
  margin-bottom: 1rem;
}

.details-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.flowers-list {
  list-style: none;
  padding: 0;
}

.flowers-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

.result-actions {
  display: flex;
  gap: 0.8rem;
}

/* 增强的AI生成等待动画 */
.ai-generating-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.flower-animation-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 1.5rem;
}

.flower-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 2;
}

.flower-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: #e75480;
  border-radius: 50%;
  z-index: 2;
}

.flower-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 40px;
  background-color: #f8e1e7;
  border-radius: 50%;
  transform-origin: center bottom;
  animation: petal-animation 3s infinite ease-in-out;
}

/* 小花动态加载效果 */
.mini-flowers-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.mini-flower {
  position: absolute;
  font-size: 1.5rem;
  animation: float-animation 5s infinite ease-in-out;
  opacity: 0;
}

.mini-flower-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0.5s;
}

.mini-flower-2 {
  top: 10%;
  left: 70%;
  animation-delay: 1s;
}

.mini-flower-3 {
  top: 70%;
  left: 20%;
  animation-delay: 1.5s;
}

.mini-flower-4 {
  top: 60%;
  left: 80%;
  animation-delay: 2s;
}

.mini-flower-5 {
  top: 40%;
  left: 90%;
  animation-delay: 2.5s;
}

.mini-flower-6 {
  top: 80%;
  left: 50%;
  animation-delay: 3s;
}

@keyframes float-animation {
  0% {
    transform: translateY(20px) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes petal-animation {
  0%, 100% {
    transform: rotate(var(--rotation)) translateY(-20px) scale(1);
  }
  50% {
    transform: rotate(var(--rotation)) translateY(-25px) scale(1.1);
  }
}

.generating-text {
  font-size: 1.2rem;
  color: #e75480;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.generating-progress {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.5rem;
  position: relative;
}

.generating-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #eee;
  z-index: 1;
}

.progress-step {
  position: relative;
  z-index: 2;
  background-color: #f9f9f9;
  padding: 0.5rem;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #999;
  transition: all 0.3s;
}

.progress-step.active {
  background-color: #e75480;
  color: white;
}

.generating-tip {
  font-style: italic;
  color: #666;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content-grid {
    grid-template-columns: 1fr;
  }
  
  .bouquet-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .free-creation-section {
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .flowers-grid,
  .packaging-grid,
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .bouquet-cards,
  .flowers-grid,
  .packaging-grid,
  .cards-grid {
    grid-template-columns: 1fr;
  }
  
  .selection-tabs,
  .recommendation-tabs {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 0 0 50%;
  }
  
  .message-content {
    max-width: 85%;
  }
}

/* 添加推荐花束卡片收藏按钮样式 */
.recommended-favorite-btn {
  bottom: 10px;
  top: auto;
}
</style>